<template>
  <div class="box">
    <div class="box-item box-i1">
      <div class="box-item-inner">1</div>
    </div>
    <div class="box-item box-i2">
      <div class="box-item-inner">2</div>
    </div>
    <div class="box-item box-i3">3</div>
  </div>
  <div class="box2">
    <div class="box2-item box2-i1">
      <div class="box2-item-inner">1</div>
    </div>
    <div class="box2-item box2-i2">
      <div class="box2-item-inner">2</div>
    </div>
    <div class="box2-item box2-i3">3</div>
  </div>
  <div class="box3">
    <div class="box3-item box3-i1">
      <div class="box3-item-inner">1</div>
    </div>
    <div class="box3-item box3-i2">
      <div class="box3-item-inner">2</div>
    </div>
    <div class="box3-item box3-i3">3</div>
  </div>
  <Row>
    <Button type="default" @click="add">操作</Button>
  </Row>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    add() {
      console.log(`helloworld`)
    }
  }
}
</script>

<style lang="scss" scoped>
// .box {
//   width: 100px;
//   height: 100px;
//   border: 1px solid #000;
//   display: flex;
//   flex-direction: column;
//   &-item {
//     display: flex;
//     align-items: center;
//     &-inner {
//       border: 1px solid #000;
//       width: 100%;
//       height: 20px;
//     }
//   }
//   &-i1,
//   &-i2 {
//     background: rgba(0, 0, 0, 0.1);
//   }
//   &-i1 {
//     flex: 1;
//     border-bottom: 1px solid #fff;
//   }
//   &-i2 {
//     flex: 1;
//   }
//   &-i3 {
//     flex: 0;
//   }
// }
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;

  &-item {
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally */

    &-inner {
      border: 1px solid #000;
      width: 100%;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center; /* Center inner content */
    }
  }

  &-i1,
  &-i2 {
    background: rgba(0, 0, 0, 0.1);
    flex: 1; /* Distribute available space equally */
  }

  &-i3 {
    height: 20px; /* Fixed height for third element */
    background: rgba(0, 0, 0, 0.1);
  }
}

.box2 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  &-item {
    justify-self: center;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #000;
  }
}
.box3 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
  &-item {
    align-self: center;
    border: 1px solid #000;
  }
}
.dn {
  display: none;
}
</style>
